<template>
	<div class="login">
		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
			<h3 class="title">后台管理系统</h3>
			<el-form-item prop="username">
				<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
					<i slot="prefix" class="el-icon-user-solid" />
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
					@keyup.enter.native="loginClick" show-password>
					<i slot="prefix" class="el-icon-user-solid" />
				</el-input>
			</el-form-item>
			<el-form-item style="width:100%;">
				<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
					@click.native.prevent="loginClick">
					<span>登 录</span>
				</el-button>
			</el-form-item>
		</el-form>
		<!--  底部  -->
		<div class="el-login-footer">
			<span>Copyright © 2023-2022 yima.icu All Rights Reserved.</span>
		</div>
	</div>
</template>
<script>
	import {
		Message
	} from "element-ui";
	import routerUtil from "../../router/routerUtil.js"
	export default {
		created() {
			this.setStarCount();
		},
		data() {
			var validatePass = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error("密码不能小于6位"));
				} else {
					callback();
				}
			};
			var validateUserName = (rule, value, callback) => {
				if (value.length === "") {
					callback(new Error("请输入账号"));
				} else {
					callback();
				}
			};
			return {
				starCount: [],
				loginForm: {
					username: "",
					password: "",
					logintype: "username_password",
				},
				loginRules: {
					username: [{
							required: true,
							message: "请输入账号",
							trigger: "blur"
						},
						{
							required: true,
							trigger: "blur",
							validator: validateUserName
						},
						{
							required: true,
							trigger: "change",
							validator: validateUserName
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							required: true,
							trigger: "blur",
							validator: validatePass
						},
						{
							required: true,
							trigger: "change",
							validator: validatePass
						},
					],
				},
			};
		},
		methods: {
			//设置流星
			setStarCount() {
				//生成星星的方法
				for (let i = 0; i < 30; i++) {
					// i < 星星个数
					let star = {}; //定义存储一个星星的对象
					let top = parseInt(Math.random() * 1000); //定义星星的top值
					let left = parseInt(Math.random() * 1500); //定义星星的left值
					let delay = parseInt(Math.random() * 3); //定义星星的动画延迟时间
					star.id = i;
					star.top = top;
					star.left = left;
					star.delay = delay;
					this.starCount.push(star);
				}
			},
			async loginClick() {
				this.$refs.loginForm.validate(async (valid) => {
					if (valid) {
						const result = await this.$api.login(this.loginForm);
						console.info("token", result)
						//刷新菜单
						routerUtil.initRouter(this, true)
						//登录处理
						localStorage.setItem("token", result);
						this.$router.replace("/home");
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-image: url("../../assets/login-background.jpg");
		background-size: cover;
	}

	.title {
		margin: 0px auto 30px auto;
		text-align: center;
		color: #707070;
	}

	.login-form {
		border-radius: 6px;
		background: #ffffff;
		width: 300px;
		padding: 25px 25px 5px 25px;

		.el-input {
			height: 38px;

			input {
				height: 38px;
			}
		}

		.input-icon {
			height: 39px;
			width: 14px;
			margin-left: 2px;
		}
	}

	.login-tip {
		font-size: 13px;
		text-align: center;
		color: #bfbfbf;
	}

	.login-code {
		width: 33%;
		height: 38px;
		float: right;

		img {
			cursor: pointer;
			vertical-align: middle;
		}
	}

	.el-login-footer {
		height: 40px;
		line-height: 40px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-family: Arial;
		font-size: 12px;
		letter-spacing: 1px;
	}

	.login-code-img {
		height: 38px;
	}
</style>